<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <link href="${themePath}/css/element-ui-2.3.7.css" rel="stylesheet">
    <link href="${themePath}/css/iview-2.14.0.css" rel="stylesheet">
    <link rel="stylesheet" href="${themePath}/css/mint-ui.css">
    <link rel="stylesheet" href="${themePath}/css/pc.css" type="text/css"/>
    <link rel="stylesheet" href="${themePath}/css/phone.css" type="text/css"/>
    <link rel="stylesheet" href="${themePath}/css/PersonalCenter.css" type="text/css"/>
    <script src="${themePath}/js/jquery.min-3.3.1.js"></script>
    <script src="${themePath}/js/vue-2.5.17.js"></script>
    <script src="${themePath}/js/vuex-3.0.1.js"></script>
    <script src="${themePath}/js/iview-2.14.0.js"></script>
    <script src="${themePath}/js/element-ui-2.4.0.js"></script>
    <script src="${themePath}/js/mint-ui-2.2.13.js"></script>
    <title>会员中心</title>
    <style>
        .dengru_box .el-col {
            margin: 15px 0;
        }
        .dengru_box {
            padding: 10px;
            background: #fff;
            margin: 0 15px;
            border-radius: 10px;
        }
        .title {
            margin: 8rem 0 1rem 0;
            color: #0060BC;
            font-size: 24px;
            text-align: center;
        }
        .btn-login {
            width: 94%;
            margin: 20px 3%;
            border-radius: 20px;
            background: #0AB7F1;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            font-size: 16px;
        }
        .input-icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            position: absolute;
            left: 10px;
            top: 8px;
            z-index: 9;
        }
        .icon-code {
            background: url("${themePath}/img/code.png") no-repeat;
            background-size: contain;
        }
        .icon-phone{
            background: url("${themePath}/img/phone.png") no-repeat;
            background-size: contain;
        }
        .el-input__inner{
            padding:  0 0 0 40px;
            border: none;
            background: #F3F3F3;
        }
    </style>
</head>

<body style="background: #fbfbfb;position: static;margin: 0 auto;overflow: hidden">
<div id="app" style="background: #fbfbfb">
    <!--<div class="Head">
        <el-row>
            <el-col :span="8">
                <div class="ToTheLeft headHeight" style="line-height: 50px; font-size: 18px;font-weight: bold;text-align: left;">
                    <Icon type="chevron-left"></Icon> 返回
                </div>
            </el-col>
            <el-col :span="8">
                <div class="ToTheLeft headHeight" style="line-height: 50px; font-size: 18px;font-weight: bold;text-align: center;">
                   登录
                </div>
            </el-col>
            <el-col :span="8">
                <div class="ToTheLeft headHeight" style="line-height: 50px; font-size: 18px;font-weight: bold;text-align: right;">

                </div>
            </el-col>
        </el-row>
    </div>-->
    <div class="home_top">
        <Row>
            <i-col span="8">
                <div class="left" @click="getBack">&#160
                    <Icon type="chevron-left"></Icon>
                    返回
                </div>
            </i-col>
            <i-col span="8">
                <div class="center">
                    <img src='${themePath}/images/logo.png' style="height: 20px;width: 20px;"/> 登录
                </div>
            </i-col>
            <i-col span="8">
                <div class="right">
                    &#160
                </div>
            </i-col>
        </Row>
    </div>
    <div style="height:50px"></div>

    <h1 class="title">崂山风景区会员系统登录</h1>

    <div class="dengru_box" style="">
        <el-row :gutter="20">
            <el-col :span="24">
                <div class="grid-content bg-purple" style="position: relative">
                    <span class="input-icon icon-phone"></span>
                    <el-input v-model="contactMobile" placeholder="请输入手机号"></el-input>
                </div>
            </el-col>
            <el-col :span="14">
                <div class="grid-content bg-purple" style="position: relative">
                    <span class="input-icon icon-code"></span>
                    <el-input v-model="validateCode" placeholder="请输入验证码"
                              style=""></el-input>
                </div>
            </el-col>
            <el-col :span="10">
                <div class="grid-content bg-purple" style="text-align: right;">
                    <a href="#" @click="getValidateCode()">
                    <span class="zzl" id="imgCode">
                         <img id="imgVerify" style="margin-left: 10px;" src="${ctxPath}/api/threecode/getImgCode"
                              alt="">
                    </span>
                    </a>
                </div>
            </el-col>
            <el-col :span="14">
                <div class="grid-content bg-purple" style="position: relative">
                    <span class="input-icon icon-code"></span>
                    <el-input v-model="VerificationCode" placeholder="请输入短信验证码"></el-input>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple" style="text-align: right;">
                    <el-button style="padding: 12px 10px" type="primary" :disabled="sfky" @click=dianji_number>({{numbers}}) {{yanzhengma}}
                    </el-button>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <div class="grid-content bg-purple" style="text-align: center;">
                    <!--<el-button type="primary" @click="login()"> &#160登录&lt;!&ndash;{{regular_valur}}&ndash;&gt; &#160</el-button>-->
                    <div class="btn-login" @click="login()">立 即 登 录</div>
                    <p><span style="color: #ff0000">*</span>验证码有效期为1小时</p>
                </div>
            </el-col>
        </el-row>

    </div>

</div>
</body>
<script>
    var ctxPath = "${ctxPath}";
    var code = '${distributionCode!}';
    var vm = new Vue({
        el: '#app',
        data: {
            contactMobile: '', //手机号的数据储存
            yanzhengma: '获取验证码', //获取验证码按钮的字
            sfky: false, //控制验证码是否可以点击
            VerificationCode: '', //验证码的数据储存
            numbers: 120, //获取验证码记数
            t: '', //停止计时器的变量
            logIn: true, //控制登录按钮
            phoneNumberReg: '',//手机号验证正则
            validateCode: '' //验证码
        },
        computed: { //计算属性
            /*regular_valur() { //查看手机号是否正确
             if (!(/^1[34578]\d{9}$/.test(this.contactMobile))) {
             this.sfky = true; //控制可点击
             return '';
             } else {
             this.sfky = false; //控制可点击
             return '';
             }
             }*/
        },
        mounted: function () {
            let _this = this;
            //获取手机号正则表达式
            $.ajax({
                type: "post",
                dataType: "json",
                async: false,
                url: ctxPath + "/api/threecode/ticket/getphoneNumberReg",
                success: function (data) {
                    _this.phoneNumberReg = data;
                }
            })
        },
        methods: { //方法
            dianji_number() { //点击获取验证码的按钮运行函数
                let _this = this;
                if (_this.validPhone(this.contactMobile) == false) {
                    this.$toast("手机号输入有误！");
                    return '';
                }
                if (_this.validateCode == null || _this.validateCode == "") {
                    this.$toast("请先输入验证码！");
                    return '';
                }
                //先验证图片验证码
                let validImgCode = true;
                $.ajax({
                    type: "post",
                    dataType: "json",
                    async: false,
                    url: ctxPath + "/api/threecode/validImgCode",
                    data: {
                        _method: "post",
                        imgCode: _this.validateCode
                    },
                    success: function (result) {
                        if (result == 0) {
                            validImgCode = false;
                            _this.$toast("验证码错误！");
                        }
                    }

                });
                if (!validImgCode) {
                    return '';
                }
                _this.sfky = true;
                //获取验证码
                $.ajax({
                    type: "post",
                    dataType: "json",
                    async: false,
                    url: ctxPath + "/api/threecode/doSendMessage",
                    data: {
                        _method: "post",
                        contactMobile: _this.contactMobile
                    },
                    success: function (data) {

                    }

                })
                _this.t = setInterval(_this.number_js, 1000); //定时器
            },
            //刷新验证码
            getValidateCode() {
                var src1 = document.getElementById('imgVerify')
                src1.src = ctxPath + "/api/threecode/getImgCode";
            },
            number_js() { //定时器的运行函数
                this.numbers = this.numbers - 1;
                if (this.numbers == 0) {
                    clearTimeout(this.t);
                    this.yanzhengma = '重新获取';
                    this.numbers = 60;
                    if (this.validPhone(this.contactMobile) != false) {
                        this.sfky = false;
                    }
                }
            },
            //手机号码验证
            validPhone(str) {
                var reg = new RegExp("^" + this.phoneNumberReg + "$");
                if (str == null || str == "") return false;

                if (!reg.test(str)) {
                    return false;
                } else {
                    return true;
                }
            },
            //登录
            login() {
                let bool = true;
                let _this = this;
                if (_this.contactMobile == null || _this.contactMobile == "") {
                    this.$toast("请输入手机号！");
                    bool = false;
                } else if (_this.validPhone(_this.contactMobile) == false) {
                    this.$toast("手机号输入有误！");
                    bool = false;
                } else if (_this.VerificationCode == null || _this.VerificationCode == "") {
                    this.$toast("请输入手机验证码！");
                    bool = false;
                } else if (_this.validateCode == null || _this.validateCode == "") {
                    this.$toast("请输入验证码！");
                    bool = false;
                } else {
                    $.ajax({
                        type: "post",
                        dataType: "json",
                        async: false,
                        url: ctxPath + "/api/threecode/loginMobile",
                        data: {
                            _method: "post",
                            contactMobile: _this.contactMobile,
                            authCode: _this.VerificationCode,
                            validateCode: _this.validateCode
                        },
                        success: function (data) {
                            if (data.code == "0") {
                                window.location.href = ctxPath + "/fore/PersonalCenter.html";
                            } else {
                                _this.$toast(data.msg);
                            }
                        }

                    })
                }
                //window.location.href=ctxPath+"/fore/index?code="+code;
            },
            getBack(){
                console.log(code)
                window.location.href = ctxPath + "/fore/index?code=" + code;
            },
        }
    })
</script>

</html>